<template>
	<div class="menu-page table-box">
		<ProTable
			ref="proTable"
			:title="buttonsList?.length ? '' : '菜单管理'"
			:columns="columns"
			:requestApi="getTableList"
			:initParam="initParam"
			:dataCallback="dataCallback"
			:pagination="false"
		>
			<!-- 表格 header 按钮 -->
			<template #tableHeader="scope">
				<el-button v-for="(item, index) in buttonsList" :key="index" :type="item.btnClass" @click="clickBtn(item.path, scope)">
					<i :class="`iconfont ${item.icon}`"></i>
					{{ item.menuName }}
				</el-button>
			</template>
			<!-- 菜单类型 -->
			<template #type="scope">
				<el-tag v-if="scope.row.type == 1" type="">菜单</el-tag>
				<el-tag v-else-if="scope.row.type == 2" type="warning">操作</el-tag>
				<el-tag v-else-if="scope.row.type == 3" type="warning">导入/导出</el-tag>
				<el-tag v-else-if="scope.row.type == 4" type="success">按钮</el-tag>
				<el-tag v-else type="info">其他</el-tag>
			</template>
			<template #enable="scope">
				<el-tag v-if="scope.row.enable == '1'">启用</el-tag>
				<el-tag v-else type="warning">停用</el-tag>
			</template>
			<!-- 图标 -->
			<template #icon="scope">
				<i :class="`iconfont ${scope.row.icon}`"></i>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-link type="primary" link class="iconfont iconedit" @click="openDrawer('编辑', scope.row)">编辑</el-link>
				<el-link type="primary" link class="iconfont icontrash-2" @click="deleteAccount(scope.row)">删除</el-link>
			</template>
		</ProTable>
		<formDialog ref="drawerRef" />
	</div>
</template>

<script setup lang="tsx" name="userMenu">
import { addMenu, deleteMenu, editMenu, getMenuList } from "@/api/modules/menu";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { useHandleData } from "@/hooks/useHandleData";
import { showTips } from "@/utils/util";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import formDialog from "./components/form.vue";
// const router = useRouter();

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({
	// type: 1
	sort: "order_num",
	order: true
});

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 datalist && total && pageIndex && pageSize 这些字段，那么你可以在这里进行处理成这些字段
const dataCallback = (data: any) => {
	return {
		datalist: data.records.children
		// total: data.total,
		// pageIndex: data.current,
		// pageSize: data.size
	};
};

// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
const getTableList = (params: any) => {
	return getMenuList({ ...params, filter: 0 });
};

const buttonsList = ref();
onMounted(async () => {
	// 获取页面按钮权限
	buttonsList.value = await useAuthButtons();
});
const clickBtn = (val: string, scope: any) => {
	switch (val) {
		case "add":
			openDrawer("新增", scope.selectList.length ? { parentId: scope.selectList[0].menuId } : {});
			break;
		case "del":
			if (scope.selectList.length == 0) return ElMessage.error("至少选择一条数据操作");
			batchDelete(scope.selectList.map((item: any) => item.id));
			break;
		case "mod":
			if (scope.selectList.length != 1) return ElMessage.error("请选择一条数据操作");
			openDrawer("编辑", scope.selectList[0]);
			break;
	}
};

// 表格配置项
const columns: ColumnProps[] = [
	{ type: "selection", fixed: "left", width: "auto" },
	{
		prop: "menuName",
		label: "菜单",
		search: { el: "input" },
		align: "left"
	},
	{ prop: "icon", label: "图标", width: 80 },
	{ prop: "type", label: "类型", width: 80 },
	{ prop: "enable", label: "状态", width: 80 },
	{ prop: "orderNum", label: "排序", width: 80 },
	{ prop: "title", label: "功能" },
	{ prop: "path", label: "路径" },
	{ prop: "component", label: "组件" },
	{ prop: "operation", label: "操作", fixed: "right", width: 150 }
];

// 删除行数据
const deleteAccount = async (params: Menu.MenuInfo) => {
	let { code, message } = await useHandleData(deleteMenu, { ids: params.id }, `删除【${params.menuName}】`);
	let ok = showTips(code, "删除菜单", message);
	if (ok) {
		proTable.value.clearSelection();
		proTable.value.reset();
	}
};

// 批量删除数据
const batchDelete = async (id: string[]) => {
	let { code, message } = await useHandleData(deleteMenu, { ids: id.join(",") }, "删除所选数据");
	let ok = showTips(code, "删除菜单", message);
	if (ok) {
		proTable.value.clearSelection();
		proTable.value.reset();
	}
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref();
const openDrawer = (title: string, rowData: Partial<Menu.MenuInfo> = {}) => {
	let params = {
		title,
		rowData: { ...rowData },
		isView: title === "查看",
		api: title === "新增" ? addMenu : title === "编辑" ? editMenu : "",
		getTableList: proTable.value.getTableList
	};
	drawerRef.value.acceptParams(params);
};
</script>
